<template>
  <div>
    <van-search v-model="search" placeholder="请输入搜索关键词" />
    <van-tabs v-model:active="active">
      <van-tab v-for="(item,index) in tabList" :title="item"> </van-tab>
    </van-tabs>

    <div class="list">
      <a-card class="card" hoverable v-for="item in list">
        <template #cover>
          <div
            :style="{
              height: '204px',
              overflow: 'hidden',
            }"
          >
            <img
              :style="{ width: '100%', transform: 'translateY(-20px)' }"
              alt="dessert"
              :src="item.cover.origin"
            />
          </div>
        </template>
        <a-card-meta :title="item.title">
          <template #description>
            ￥{{ item.price }}
          </template>
        </a-card-meta>
      </a-card>
    </div>

    

  </div>
</template>

<script>
import { travelList } from '../mock/home';
export default {
  data() {
    return {
      search: "", //获取用户输入的文字
      tabList:["动物", "美宿", "岛屿", "火山", "极光", "艺文", "研学", "花季"],
      list:travelList
    };
  },
  methods: {
    name() {
      
    },
    fn(){

    }
  },
};
</script>

<style lang="scss" scoped>
.list{
  padding: 5%;
  .card{
    margin-bottom: 10px;
  }
}
</style>
